<template>
    <div>
        <el-form :model="fromData" label-width="80px">
            <el-form-item label="标题">
                <el-input v-model="fromData.title"></el-input>
            </el-form-item>
            <el-form-item label="内容">
                <quill-editor
                    v-model="fromData.content"
                    :options="editorOption"
                ></quill-editor>
                <el-input v-model="fromData.content"></el-input>
            </el-form-item>
            <el-form-item label="封面">
                <el-radio v-model="fromData.cover.type" label="0">无图</el-radio>
                <el-radio v-model="fromData.cover.type" label="1">单图</el-radio>
                <el-radio v-model="fromData.cover.type" label="3">三图</el-radio>
                <el-radio v-model="fromData.cover.type" label="-1">自动</el-radio>
            </el-form-item>
            <div v-if="fromData.cover.type > 0">
                <cover
                 v-for="(item,index) in parseInt(fromData.cover.type) " 
                 :key="index"
                :imgurl.sync="fromData.cover.images[index]"></cover>
            </div>
             <el-form-item label="频道">
                <el-select v-model="fromData.channel_id">
                    <el-option 
                        v-for="(item) in channels"
                        :key="item.id"
                        :value="item.id" 
                        :label="item.name">
                        </el-option>
                </el-select>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" @click="handleClickSend">
                    发表
                </el-button>
                <el-button type="primary" @click="handleClickCg">
                    存入草稿
                </el-button>
            </el-form-item>
        </el-form>
       
        
    </div>
</template>
<script>
import {api_channels,api_addArticles} from '@/api/articles'
import {quillEditor} from "vue-quill-editor"
import "quill/dist/quill.core.css"
import "quill/dist/quill.snow.css"
import "quill/dist/quill.bubble.css"
import cover from "./cover"
export default {
    components:{
        quillEditor,
        cover
    },
    data(){
        return{
            editorOption:{
                placeholder:"",
                modules:{
                    toolbar:[
                        ["bold","italic","underline","strike"],
                        ["blockquote","code-block"],
                        ["image"]
                    ]
                }
            },
            fromData:{
                title:"",//文章标题
                content:"",//文章内容
                cover:{
                    type:"3",//封面类型
                    images:[],//图片
                },//封面
               
                channel_id:0,//文章所述频道
            },
            channels:[],
            typNum:0,
        }
    },
    methods:{
        changeRadio(item){
            console.log(item)
            this.typNum = item
        },
        //获取文章频道
        getChannels(){
            api_channels().then((res)=>{
                console.log("文章频道=",res)
                this.channels = res.data.data.channels
                this.fromData.channel_id = this.channels[0].id
            })
        },
        handleClickSend(){
            this.fromData.cover.type = parseInt(this.fromData.cover.type)

            api_addArticles({
                draft:true
            },this.fromData).then(res=>{
                console.log(res)
            })
        },
        handleClickCg(){
            this.fromData.cover.type = parseInt(this.fromData.cover.type)
            api_addArticles({
                draft:false
            },this.fromData).then(res=>{
                console.log(res)
            })
        },

    },
    created(){
        this.getChannels()
    }
}
</script>
<style scoped>

</style>